    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>带阴影的字体</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                height: 200px;
                width: 800px;
                margin: 200px auto;
                background: #cccccc;
            }
            .box>span{
                display: block;
                height: 100px;
                width: 100px;
                color: #000011;

                font-weight: 700;
                font-size: 100px;
                line-height: 100px;
                float: left;
                margin-right: 30px;
                position: relative;
                transform-style: preserve-3d;
                /*transition: all 2s;*/
            }
            span::before,span::after{
                position: absolute;
                content: attr(data-cont);
                top: 0;
                left: 0;
                display: block;
                height: 100px;
                width: 100px;
                color: #ffffff;
                font-weight: 700;
                font-size: 100px;
                line-height: 100px;
                transform-origin: left;
                transform: scale(0.98,1);
                transition: all 2s;
            }
            /*span::after{*/
                /*color: #1dcaff;*/
                /*transform: rotateY(20deg);*/
                /*transform: scale(0.9,1);*/
            /*}*/
            .box:hover span::after{
                color: #fefefe;
                transform: rotateY(-20deg) skew(0deg,5deg);

            }
            span::before{
                color: rgba(16, 16, 21, 0.4);
            }
            .box:hover span::before{
                transform:  skew(0deg,15deg);
            }
        </style>
    </head>
    <body>
    <div class="box">
        <span class="spn" data-cont="我">我</span>
        <span class="spn" data-cont="爱">爱</span>
        <span class="spn" data-cont="你">你</span>
        <span class="spn" data-cont="中">中</span>
        <span class="spn" data-cont="国">国</span>
    </div>
    </body>
    </html>